<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Introduction to graphics - The Zinc Plugin</title>
		
		
		<!-- This will all be replaced on the live site -->
		<link rel="stylesheet" href="http://dojotoolkit.org/css/site.css" type="text/css" media="all" />
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
		<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.7/resources/style/style.css" media="screen">
		<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
		<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
		<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
		<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
		<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
		<!-- Don't add anything here. This will be replaced on the live site. -->
		<script>
			dojo.ready(function(){
				SyntaxHighlighter.all();
			});
		</script>
	</head>
	<body class="claro">
		<div id="page" class="docPage">
			<div id="header">
    			<div class="container">
        			<span id="logo"><a href="http://dojotoolkit.org" title="Homepage"><img src="http://dojotoolkit.org/images/logo.png" alt="Dojo Toolkit" /></a></span>
    			</div>
			</div>
			<div id="main">
				<div id="content" class="innerBox">
					<div class="pageTitleContainer">
						<h1>Documentation</h1>
						<ul class="subnav">
							<li><a href="http://dojotoolkit.org/documentation/"><span>Tutorials</span></a></li>
							<li><a href="http://dojotoolkit.org/reference-guide/"><span>Reference Guide</span></a></li>
							<li><a href="http://dojotoolkit.org/api/"><span>API Documentation</span></a></li>
						</ul>
					</div>
					<div style="clear:left;" >
						<div class="container" style="margin-bottom:50px; width:960px">
							<div class="unit size2of3 firstUnit">
								<!-- BEGIN YOUR TUTORIAL HERE -->
								<div class="tutIntro">
									<img src="images/preview.jpg" class="tut_preview" /><!-- Feel free to use youw own 200x200 image. Must be royalty free or similar license -->
									<div class="introContainer">
										<h2>Introduction to graphics</h2>
										<p class="summary">Required. In this tutorial you will be introduced to the rendition object and learn how to use it to display some primitive graphics.</p>
										<ul>
											<li><span>Difficulty:</span> Beginner <!-- Beginner/Intermediate/Expert --></li>
											<li><span>Zinc Plugin Version:</span> 0.7 <!-- The _single_ version of dojo this is being written for. --></li>
										</ul>
									</div>
								</div>
								<h3>Getting Started</h3>
								<p>Give some background here explaining why what the user is going to learn is important.</p>
								<p>Taken the download manager tutorial and added this code to draw the cube's lines as green cylinders and nodes as blue spheres.</p>
<!-- Only set html-script to true if you actually have HTML and JS mixed. Also you must indent this way or else things get really whacky. -->
<pre class="brush: js; html-script: false;">
if (cubeRegion) {
	// FIXME: is there a better way to check for success?
	console.log("found the cube region");
	// do some basic set-up of the scene viewer. 
	var sceneViewer = zincPlugin.sceneViewer;
	sceneViewer.setBackgroundColourRGB(1.0, 1.0, 1.0);
	sceneViewer.antialiasMode = 4;
	// Now we get a handle to the default graphics module for this zinc context 
	var graphicsModule = zincPlugin.context.getDefaultGraphicsModule();
	// and the rendition object for the cube's region 
	var cubeRendition = graphicsModule.getRendition(cubeRegion);
	// and define standard materials for the graphics module 
	graphicsModule.defineStandardMaterials();
	// Now we are able to layout the scene we want to view in the scene viewer
	cubeRendition.beginChange(); // FIXME: cache changes to improve performance?
	// API for the rendition object is still lacking, so we make use of the type-specific
	// execute command method.
	cubeRendition.executeCommand("general clear default_coordinate coordinates");
	cubeRendition.executeCommand("cylinders constant_radius 0.05 material green");
	cubeRendition.executeCommand("node glyph sphere size '0.15*0.15*0.15' material blue");
	// finished making changes to the rendition, so end the caching and execute the changes.
	cubeRendition.endChange();
	// reset the scene to ensure all visible graphics are shown.
	sceneViewer.viewAll();
} else {
	alert("Something went horribly wrong loading the cube region?");
}</pre>
								<p>Code samples are great but we want to show them that the code example actually works, so that's where the view demo button comes in. Note, it's ok to have a few code samples strung together that lead up to a single demo.</p>
								<a class="demoBtn demo" href="demo/demo.html">View Demo</a>

								<p>Explain to the user what the above code does when run and why it does it. While your demo should be well documented it's nice to be able to read the author's view of what the demo does. For example, this code sample has this description after it:</p>
								<h3>What else to show?</h3>
								<p>Want to keep this focused on simple introduction to graphics, should be linking to the API documentation (and examples?) to show the full range of graphics that can be done with the rendition object.
								<ul>
									<li>Check what rendition API does exist and use it if possible</li>
								</ul>
							<h3>Conclusion</h3>
							<p>Now you know how to draw something, yay!</p>
						</div>
						<div class="sidebar unit size1of3">
							<div class="container">
								<div class="sidebarSection">
									<h4>About the Author</h4>
									<div class="authorInfo">
										<img src="images/avatar.jpg" class="avatar" />
										<p>
											Andre is awesome at the <a href="http://www.abi.auckland.ac.nz">The Auckland Bioengineering Institute</a>
											<!-- Your avatar should be 100x100. Keep your bio to a couple of lines and provide a link to your website -->
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br style="clear:both;" />
		<div id="main">
			<div id="content" class="innerBox">
				<div id="foot">
					<div class="innerBox">
						<span class="redundant">&copy;</span> <a href="http://dojofoundation.org">The Dojo Foundation</a>, All Rights Reserved.&nbsp;&nbsp;&nbsp;<a href="http://dojotoolkit.org/license/">License Information</a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>